<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>扩展模块 - Layui</title>
    <link rel="stylesheet" href="../src/css/layui.css">
  </head>
  <body>
    <div class="layui-text layui-padding-3">
      <h3>打开浏览器控制台查看测试结果</h3>
    </div>
    <script src="../src/layui.js"></script>
    <script>
      layui.config({
        base: 'extends/' // 用于扩展模块的基础路径
      });

      // 扩展模块
      layui.extend({
        // 扩展遵循 Layui 规范的模块
        index: 'index', // 会前置追加 base 基础路径
        test1: 'test/test1', // 会前置追加 base 基础路径
        test2: '{/}extends/test/test2', // 不会前置追加 base 基础路径，即单独路径
        // 扩展任意外部模块
        markdownit: {
          src: 'https://cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js', // 模块路径
          api: 'markdownit' // 接口名称
        },
        Prism: {
          src: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js',
          api: 'Prism'
        }
      });

      // 加载模块
      layui.use(['all', 'index', 'test1', 'test2', 'markdownit', 'Prism'], function() {
        console.log('Layui 内置模块 loaded: ', layui);
        console.log('遵循 Layui 规范的扩展模块 loaded: ', layui.index, layui.test1, layui.test2);
        console.log('任意外部模块 loaded: ')
        console.log('  > markdownit: ', layui.markdownit);
        console.log('  > Prism: ', layui.Prism);
      });

      // 直接加载 base 目录下的模块
      layui.use(['test'], function() {
        console.log('直接加载 base 目录下的模块 loaded: ', layui.test);
      });

      // 加载外部样式
      layui.link('https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css', function(link) {
        console.log('prism.min.css loaded');
      }, 'prism');
    </script>
  </body>
</html>
